<template>
  <a-config-provider prefix-cls="ss">
    <div class="container">
      <RouteTitle />
      <a-row>
        <a-button
          style="margin: 20px 0; border-radius: 5px"
          type="primary"
          @click="createKeyWords"
          ><plus-outlined />新增关键词</a-button
        >
      </a-row>
      <a-table
        :dataSource="data"
        :columns="columns"
        :pagination="pagination"
        @change="handleTableChange"
        :scroll="{ x: 1000 }"
        :loading="loading"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key == 'extraction_word'">
            {{ record.extraction_word }}
          </template>
          <template v-if="column.key == 'master_keyword'">
            <template v-if="record?.master_keyword?.length <= 3">
              <div v-for="(ele, index) in record?.master_keyword" :key="index">
                {{ ele }}
              </div>
            </template>
            <template v-else>
              <a-popover v-if="record?.master_keyword?.length > 3">
                <div
                  v-for="(ele, index) in record?.master_keyword?.slice(0, 3)"
                  :key="index"
                >
                  {{ ele }}
                </div>
                <template #content>
                  <p
                    v-for="(ele, index) in record?.master_keyword?.slice(3)"
                    :key="index"
                  >
                    {{ ele }}
                  </p>
                </template>
                <div class="eslipes"><ellipsis-outlined /></div>
              </a-popover>
            </template>
          </template>
          <template v-if="column.key == 'prefix'">
            <template v-if="record?.prefix?.length <= 3">
              <div v-for="(ele, index) in record?.prefix" :key="index">
                <div>{{ ele }}</div>
              </div>
            </template>
            <template v-else>
              <a-popover v-if="record?.prefix?.length > 3">
                <div
                  v-for="(ele, index) in record?.prefix?.slice(0, 3)"
                  :key="index"
                >
                  <div>{{ ele }}</div>
                </div>
                <template #content>
                  <p
                    v-for="(ele, index) in record?.prefix?.slice(3)"
                    :key="index"
                  >
                    {{ ele }}
                  </p>
                </template>
                <div class="eslipes"><ellipsis-outlined /></div>
              </a-popover>
            </template>
          </template>
          <template v-if="column.key == 'suffix'">
            <template v-if="record?.suffix?.length <= 3">
              <div v-for="(ele, index) in record?.suffix" :key="index">
                {{ ele }}
              </div>
            </template>
            <template v-else>
              <a-popover v-if="record?.suffix?.length > 3">
                <div
                  v-for="(ele, index) in record?.suffix?.slice(0, 3)"
                  :key="index"
                >
                  {{ ele }}
                </div>
                <template #content>
                  <p
                    v-for="(ele, index) in record?.suffix?.slice(3)"
                    :key="index"
                  >
                    {{ ele }}
                  </p>
                </template>
                <div class="eslipes"><ellipsis-outlined /></div>
              </a-popover>
            </template>
          </template>
          <template v-if="column.key == 'keywordLibrary'">
            <a-button type="link" @click="viewKeyWords(record)"
              >查看词库</a-button
            >
          </template>
          <template v-if="column.key == 'action'">
            <a-space>
              <a-button
                size="small"
                type="primary"
                @click="editKeyWords(record)"
                >编辑</a-button
              >
              <a-button
                @click="delHandle(record)"
                type="primary"
                ghost
                size="small"
                >删除</a-button
              >
            </a-space>
          </template>
        </template>
      </a-table>
    </div>
  </a-config-provider>
  <KeywordSettings ref="keywordSettings" @success="getDataList()" />
  <ViewThesaurus ref="viewThesaurus" />
</template>

<script>
import { message, Modal } from "ant-design-vue";
import {
  defineComponent,
  reactive,
  ref,
  onMounted,
  watch,
  computed,
  toRefs,
  createVNode,
} from "vue";
import request from "@/common/utils/request";
import {
  ExclamationCircleOutlined,
  EllipsisOutlined,
  PlusOutlined,
} from "@ant-design/icons-vue";
// 编辑关键词
import KeywordSettings from "./keywordSettings.vue";
// 关键词词库
import ViewThesaurus from "./modules/ViewThesaurus.vue";
export default defineComponent({
  components: {
    ExclamationCircleOutlined,
    EllipsisOutlined,
    PlusOutlined,
    KeywordSettings,
    ViewThesaurus,
  },
  setup() {
    const state = reactive({
      data: [],
      total: 0,
      page: 1,
      pageSize: 10,
      loading: false,
      columns: [
        {
          title: "关键词规则名称",
          dataIndex: "extraction_word",
          key: "extraction_word",
          align: "center",
          width: 150,
        },
        {
          title: "主关键词",
          dataIndex: "master_keyword",
          key: "master_keyword",
          align: "center",
          width: 150,
        },
        {
          title: "前缀",
          dataIndex: "prefix",
          key: "prefix",
          align: "center",
          width: 150,
        },
        {
          title: "后缀词",
          dataIndex: "suffix",
          key: "suffix",
          align: "center",
          width: 150,
        },
        {
          title: "关键词库",
          dataIndex: "keywordLibrary",
          key: "keywordLibrary",
          align: "center",
          width: 150,
        },
        {
          title: "操作",
          dataIndex: "action",
          key: "action",
          align: "center",
          width: 100,
        },
      ],
    });

    const getDataList = () => {
      state.loading = true;
      const params = {
        pageSize: state.pageSize,
        page: state.page,
      };
      request
        .get("/work_ai", "/user/filmrelease/ai/keyword", params)
        .then((res) => {
          console.log(res);
          state.data = res.result?.data;
          state.total = res.result?.total;
          state.loading = false;
        })
        .finally(() => {
          state.loading = false;
        });
    };
    getDataList();
    // 分页切换
    const handleTableChange = (pager, filter, sorter) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
      getDataList();
    };
    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: false,
      // size: "small",
      showTotal: (total) => `共${total}条`,
    }));
    const delHandle = (record) => {
      console.log(record);
      Modal.confirm({
        title: "删除关键词",
        icon: createVNode(ExclamationCircleOutlined),
        content: "确定删除关键词吗？",
        okText: "确认",
        cancelText: "取消",
        onOk() {
          request
            .del("/work_ai", "/user/filmrelease/ai/keyword/delete", {
              id: `${record.id}`,
            })
            .then((res) => {
              if (res.result) {
                message.success("删除成功");
                getDataList();
              }
            });
        },
        onCancel() {
          Modal.destroyAll();
        },
      });
    };
    // 新增关键词
    const keywordSettings = ref(null);
    const createKeyWords = () => {
      keywordSettings.value && keywordSettings.value.showModal();
    };
    // 修改关键词
    const editKeyWords = (info) => {
      keywordSettings.value && keywordSettings.value.showModal(info);
    };
    // 查看词库
    const viewThesaurus = ref(null);
    const viewKeyWords = (info) => {
      viewThesaurus.value && viewThesaurus.value.showModal(info);
    };
    // 查看词库
    return {
      ...toRefs(state),
      pagination,
      handleTableChange,
      delHandle,
      createKeyWords,
      getDataList,
      editKeyWords,
      keywordSettings,
      viewKeyWords,
      viewThesaurus,
    };
  },
});
</script>

<style lang="less" scoped>
.container {
  padding: 10px;

  .eslipes {
    cursor: pointer;
  }
}
</style>
